<template>
    <div>
        <el-form>
            <el-row :gutter="20">
                <el-col :span="6" :offset="0">
                    <el-form-item label="供应商：">
                        <span>{{ fromData.supName }}</span>
                    </el-form-item>
                </el-col>
                <el-col :span="6" :offset="0">
                    <el-form-item label="单据日期：">
                        <span>{{ fromData.operTime }}</span>
                    </el-form-item>
                </el-col>
                <el-col :span="6" :offset="0">
                    <el-form-item label="单据编号：">
                        <span>{{ fromData.number }}</span>
                    </el-form-item>
                </el-col>
                <el-col :span="6" :offset="0">
                    <el-form-item label="关联订单：">
                        <span>{{ fromData.linkNumber }}</span>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-table :data="fromData.page" show-summary :summary-method="getSummaries" border stripe >
                <el-table-column label="仓库名称" prop="depName" />
                <el-table-column label="条码" prop="barCode" />
                <el-table-column label="名称" prop="name" />
                <el-table-column label="规格" prop="standard" />
                <el-table-column label="型号" prop="model" />
                <el-table-column label="颜色" prop="color" />
                <el-table-column label="扩展信息" prop="mfrs" />
                <el-table-column label="库存" prop="kt" />
                <el-table-column label="单位" prop="materialUnit" />
                <el-table-column label="数量" prop="operNumber" />
                <el-table-column label="单价" prop="unitPrice" />
                <el-table-column label="金额" prop="allPrice" />
                <el-table-column label="税率(%)" prop="taxRate" />
                <el-table-column label="税额" prop="taxMoney" />
                <el-table-column label="价税合计" prop="taxLastMoney" />
                <el-table-column label="备注" prop="remark" />
            </el-table>
            <el-row :gutter="20">
                <el-col :span="24" :offset="0">
                    <el-form-item label="备注：" style="margin-top: 5px">
                        <span>{{ fromData.remark }}</span>
                    </el-form-item>
                </el-col>
                <el-col :span="6" :offset="0">
                    <el-form-item label="优惠率：" style="margin-top: 5px">
                        <span>{{ fromData.discount }}%</span>
                    </el-form-item>
                </el-col>
                <el-col :span="6" :offset="0">
                    <el-form-item label="付款优惠：" style="margin-top: 5px">
                        <span>{{ fromData.discountMoney }}</span>
                    </el-form-item>
                </el-col>
                <el-col :span="6" :offset="0">
                    <el-form-item label="优惠后金额：" style="margin-top: 5px">
                        <span>{{ fromData.discountLastMoney }}</span>
                    </el-form-item>
                </el-col>
                <el-col :span="6" :offset="0">
                    <el-form-item label="其它费用：">
                        <span>{{ fromData.otherMoney }}</span>
                    </el-form-item>
                </el-col>
                <el-col :span="6" :offset="0">
                    <el-form-item label="结算账户：" style="margin-top: 5px">
                        <span>{{ fromData.accName }}</span>
                    </el-form-item>
                </el-col>
                <el-col :span="6" :offset="0">
                    <el-form-item label="本次付款：" style="margin-top: 5px">
                        <span>{{ fromData.changeAmount }}</span>
                    </el-form-item>
                </el-col>
                <el-col :span="6" :offset="0">
                    <el-form-item label="本次欠款：" style="margin-top: 5px">
                        <span>{{ fromData.debt }}</span>
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>
        <el-row :gutter="20" style="height: 30px">
            <el-col :span="24" :offset="0">
                <el-form-item style="float: right;">
                    <el-button @click="">导出</el-button>
                    <el-button @click="close">取消</el-button>
                </el-form-item>
            </el-col>
        </el-row>
    </div>
</template>

<script setup>
// 导入Vue中的ref和defineEmits函数
import { ref, defineEmits,defineProps } from "vue";
// 使用defineEmits函数定义可以触发的自定义事件
import request from "@/api/request";
let emits = defineEmits(["close"])
let data = defineProps([ "data" ])
let fromData = data.data
let id = fromData.id
console.log("fromData",fromData)
//根据headerId查询子单据
let findById =()=>{
    request.get("/purchase/order/findById/"+ id)
    .then(resp => {
        fromData.page = resp.data
    })
}
findById();


//表格合计
const getSummaries = (param) => {
  const { columns, data } = param;
  const sums = [];
  sums[0] = "合计";
  const operNumbers = data.map((item) => Number(item['operNumber']));
  const allPrices = data.map((item) => Number(item['allPrice']));
  const taxMoneys = data.map((item) => Number(item['taxMoney']));
  const taxLastMoneys = data.map((item) => Number(item['taxLastMoney']));
  let numberTotal = 0;
  let allPriceTotal = 0;
  let taxMoneyTotal = 0;
  let taxLastMoneyTotal = 0;
  operNumbers.forEach(item=>{
    numberTotal+=item
  })
  allPrices.forEach(item=>{
    allPriceTotal+=item
  })
  taxMoneys.forEach(item=>{
    taxMoneyTotal+=item
  })
  taxLastMoneys.forEach(item=>{
    taxLastMoneyTotal+=item
  })
  sums[9] = numberTotal
  sums[11] = allPriceTotal
  sums[13] = taxMoneyTotal
  sums[14] = taxLastMoneyTotal
  return sums;
};

let close = () => {
  emits("close");
};
</script>

<style scoped>

</style>
